<template>
  <div :class="getClass(num)" :id="getId(num)">
    <div
      :class="this.ifRender ? clickClass(num) : getClassAdd(num)"
      @click="isClick"
    ></div>
    <transition
      name="basemap"
      enter-active-class="animate__animated animate__fadeIn faster"
      leave-active-class="animate__animated animate__fadeOut faster"
    >
      <SubLayer @urlName="getName" v-show="ifRender" :subId="num"></SubLayer>
    </transition>
  </div>
</template>
<script>
import Config from "../../config";
import { mapState } from "vuex";
import SubLayer from "./SubLayer";
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import MapImageLayer from "@arcgis/core/layers/MapImageLayer";

export default {
  name: "SubScreen",
  components: {
    SubLayer,
  },
  data() {
    return {
      resultName: {},
      sendName: "",
      ifRender: false,
      map: {},
      MapImageLayer: null,
      layerItem: [],
    };
  },
  props: ["num"],
  computed: {
    ...mapState({
      vuexMap: (state) => state.oneMap.map,
      vuexView: (state) => state.oneMap.view,
    }),
  },
  methods: {
    getTagClass(input) {
      if (input == "1") {
        return "tag1";
      } else if (input == "2") {
        return "tag2";
      } else if (input == "3") {
        return "tag3";
      } else {
        return "tag4";
      }
    },
    isClick() {
      this.ifRender = !this.ifRender;
    },
    tagClick() {
      this.ifRender = !this.ifRender;
    },
    getName(data) {
      this.resultName = data;
    },
    clickClass(input) {
      if (input == "1") {
        return "addClick1";
      } else if (input == "2") {
        return "addClick2";
      } else if (input == "3") {
        return "addClick3";
      } else {
        return "addClick4";
      }
    },
    clickTagClass(input) {
      if (input == "1") {
        return "tag1 tag1-click";
      } else if (input == "2") {
        return "tag2 tag2-click";
      } else if (input == "3") {
        return "tag3 tag3-click";
      } else {
        return "tag4 tag4-click";
      }
    },
    getClass(input) {
      if (input == "1") {
        return "subscreen1";
      } else if (input == "2") {
        return "subscreen2";
      } else if (input == "3") {
        return "subscreen3";
      } else {
        return "subscreen4";
      }
    },
    getClassAdd(input) {
      if (input == "1") {
        return "add1";
      } else if (input == "2") {
        return "add2";
      } else if (input == "3") {
        return "add3";
      } else {
        return "add4";
      }
    },
    getId(input) {
      if (input == "1") {
        return "viewDiv1";
      } else if (input == "2") {
        return "viewDiv2";
      } else if (input == "3") {
        return "viewDiv3";
      } else {
        return "viewDiv4";
      }
    },
    changeLayerState() {
      let add = {};
      let remove = {};
      let result = [];
      if (this.resultName) {
        let index = this.layerItem.indexOf(this.resultName.id);
        if (index == -1 && this.resultName.selected == true) {
          add[this.resultName.id] = this.resultName.url;
          this.layerItem.push(this.resultName.id);
        }
        if (index != -1 && this.resultName.selected == false) {
          remove[this.resultName.id] = this.resultName.url;
          this.layerItem.splice(index, 1);
        }
        result.push(add);
        result.push(remove);
      }

      return result;
    },
    addLayer(input) {
      for (let k in input) {
        let tempLayer = new this.MapImageLayer({
          id: k,
          url: input[k],
        });
        this.map.add(tempLayer);
      }
    },
    removeLayer(input) {
      for (let k in input) {
        let foundLayer = this.map.allLayers.find(function (layer) {
          return layer.id == k;
        });
        this.map.remove(foundLayer);
      }
    },
    //初始化地图
    initMap() {
      const that = this;

      that.MapImageLayer = MapImageLayer;
      that.map = new Map({
        basemap: that.vuexMap.basemap,
      });

      let view = new MapView({
        container: that.getId(that.num),
        map: that.map,
        center: that.vuexView.center,
        zoom: that.vuexView.zoom,
        constraints: {
          snapToZoom: false,
        },
      });

      view.ui.components = [];

      that.$emit("func", view);
    },
  },
  watch: {
    resultName: {
      handler() {
        let that = this;
        let addRemove = that.changeLayerState();
        if (addRemove[1]) {
          that.removeLayer(addRemove[1]);
        }
        if (addRemove[0]) {
          that.addLayer(addRemove[0]);
        }
        this.ifRender = false;
      },
      // immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.initMap();
    this.layerItem.push(this.resultName.id);
  },
};
</script>
<style scoped>
.subscreen1 {
  padding: 0;
  margin: 0;
  width: 50%;
  height: 50%;
  float: left;
  border-right: 1px solid rgba(48, 128, 254, 1);
  border-bottom: 1px solid rgba(48, 128, 254, 1);
}
.subscreen2 {
  padding: 0;
  margin: 0;
  width: 50%;
  height: 50%;
  float: left;
}
.subscreen3 {
  padding: 0;
  margin: 0;
  width: 50%;
  height: 50%;
  float: left;
}
.subscreen4 {
  padding: 0;
  margin: 0;
  width: 50%;
  height: 50%;
  float: left;
  border-left: 1px solid rgba(48, 128, 254, 1);
  border-top: 1px solid rgba(48, 128, 254, 1);
}
.add1,
.add2,
.add3,
.add4 {
  width: 40px;
  height: 40px;
  background-image: url("../../assets/yzt/添加.png");
  background-position: top;
  position: absolute;
  top: 40px;
  left: 20px;
  cursor: pointer;
}
/* .add2 {
  width: 40px;
  height: 40px;
  background-image: url("../../assets/yzt/添加.png");
  background-position: top;
  position: absolute;
  top: 80px;
  left: calc(50% + 20px); 
  cursor: pointer;
}
.add3 {
  width: 40px;
  height: 40px;
  background-image: url("../../assets/yzt/添加.png");
  background-position: top;
  position: absolute;
  top: calc(50% + 20px);
  left: 20px;
  cursor: pointer;
}
.add4 {
  width: 40px;
  height: 40px;
  background-image: url("../../assets/yzt/添加.png");
  background-position: top;
  position: absolute;
    top: calc(50% + 20px);
  left: calc(50% + 20px);
  top: 80px;
  left: 20px;
  cursor: pointer;
} */
.add1:hover,
.add2:hover,
.add3:hover,
.add4:hover {
  background-image: url("../../assets/yzt/添加-鼠标滑过.png");
}

.addClick1,
.addClick2,
.addClick3,
.addClick4 {
  width: 40px;
  height: 40px;
  background-image: url("../../assets/yzt/添加-鼠标滑过.png");
  background-position: top;
  position: absolute;
  top: 40px;
  left: 20px;
  cursor: pointer;
}

.tag1,
.tag2,
.tag3,
.tag4 {
  width: 140px;
  height: 40px;
  position: absolute;
  font-size: 12px;
  padding: 12px 20px;
  background-color: white;
  cursor: pointer;
}
.tag1:hover,
.tag2:hover,
.tag3:hover,
.tag4:hover {
  color: blue;
}
.tag1-click,
.tag2-click,
.tag3-click,
.tag4-click {
  color: blue;
}
.tag1,
.tag2,
.tag3,
.tag4 {
  top: 80px;
  left: 20px;
}
</style>
